import React, { useState, useEffect } from 'react'
import { Card } from 'antd'
import styles from '@/views/overview/index.module.scss'
import img1 from '@/assets/overview-image/2.png'
import img2 from '@/assets/overview-image/4.png'
import img3 from '@/assets/overview-image/6.png'
import img4 from '@/assets/overview-image/8.png'
import img5 from '@/assets/overview-image/10.png'
import img6 from '@/assets/overview-image/12.png'

interface instanceData {
  num: number
  maintain: number
  staleDated: number
}

interface propsData {
  data: instanceData | any
  moreFun?: () => void
}

const GamCount: React.FC<propsData> = ({ data }) => {
  const [dataSource, setDataSource] = useState<any>()
  useEffect(() => {
    let forData = [
      { key: 1, title: '干式灭火器', num: 4, maintain: 4, staleDated: 0, img: img1 },
      { key: 2, title: '水泵', num: 2, maintain: 2, staleDated: 1, img: img2 },
      { key: 3, title: '云梯', num: 1, maintain: 1, staleDated: 0, img: img3 },
      { key: 4, title: '消防水管', num: 2, maintain: 2, staleDated: 0, img: img4 },
      { key: 5, title: '喷淋', num: 2, maintain: 1, staleDated: 0, img: img5 },
      { key: 6, title: '消防栓', num: 1, maintain: 2, staleDated: 0, img: img6 },
    ]
    if (Array.isArray(data) && data.length) {
      forData = forData.map((item, index) => {
        item.num = data[index].num
        item.maintain = data[index].maintain
        item.staleDated = data[index].staleDated
        return item
      })
    }
    setDataSource(
      forData.map((item) => {
        return (
          <div className={styles['gam-item']} key={item.key}>
            <img src={item.img} alt="" />
            <div>{item.title + item.num}个</div>
            <div>
              <span style={{ color: '#106B24' }}>已保养{item.maintain}个</span>
              <span style={{ color: item.staleDated ? '#D90404' : '#797979', marginLeft: '8px' }}>
                {item.staleDated}过期
              </span>
            </div>
          </div>
        )
      })
    )
    return () => {}
  }, [])
  return (
    <Card
      className={styles['gam-box']}
      title="消防设备物资统计"
      extra={
        <a href={'http://139.196.21.184/#/asset/assetFacility'} target="_blank" className={styles['more']}>
          更多〉
        </a>
      }
    >
      <div className={styles['gam-list']}>{dataSource}</div>
    </Card>
  )
}

export default GamCount
